<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import CustomNavbar from './components/CustomNavbar.vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 是否加载中标记
const isLoading = ref(false)
// 页面加载
onLoad(async () => {
  isLoading.value = true
  // await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
  isLoading.value = false
})

// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 加载数据

  // 关闭动画
  isTriggered.value = false
}

// 搜索
const keyword = ref('')
const find = async () => {
  uni.showToast({ icon: "success", title: `find` })
}

// 标签明细
type FileType = {
  id: number,
  name: string
}
const fileTableList = ref<FileType[]>([
  { id: 1, name: '111' },
  { id: 2, name: '222' },
  { id: 3, name: 'aaa' },
])
const click = () => {
  uni.showToast({ icon: "success", title: "click" })
}

const open = (index: number) => {
  uni.showToast({ icon: "success", title: `open${index}` })
}

const options =  ref([
  {
    text: '查看',
    style: {
      backgroundColor: '#3C7DFF'
    }
  },
  {
    text: '下载',
    style: {
      backgroundColor: '#dd524d'
    }
  }
])

</script>

<template>
  <view class="viewport">
    <!-- 自定义导航栏 -->
    <view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
      <view class="logo">
        <h2 style="color: white;">文件系统</h2>
      </view>
    </view>

    <view style="margin-top: 5px;">
      <u-search
        shape="round" :show-action="false" placeholder="搜索" v-model="keyword" @change="find">
      </u-search>
    </view>
    <view class="details-page">
      <view class="details-page-item">
        <u-swipe-action
            class="details-item"
            :show="true"
            :index="index"
            v-for="(item,index) in fileTableList"
            :key="item.id"
            @click="click"
            @open="open(index)"
            :options="options"
        >
          <view class="details-content-box" >
            <text class="details-content-title">
              沟通内容
            </text>
            <view class="details-content-page">
              {{ item.name }}
            </view>
            <view class="details-name">
              <view class="details-name-left">
                <!-- <image style="width: 30rpx; height: 30rpx; margin-right: 6rpx;" src="../../static/home/user.svg" mode='aspectFit' class="zai-logo"></image> -->
                <text>{{ item.name  }}</text>
              </view>
              <view class="details-name-right">
                <!-- <image style="width: 24rpx; height: 24rpx; margin-right: 6rpx;" src="../../static/home/date.svg" mode='aspectFit' class="zai-logo"></image> -->
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
        </u-swipe-action>
        <view v-if="fileTableList.length===0" class="nodata">
          <u-empty text="暂无数据" mode="list"></u-empty>
        </view>
			</view>
    </view>
  </view>
</template>

<style lang="scss">
/* 自定义导航条 */
.navbar {
  background-image: url(@/static/images/navigator_bg.png);
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      flex: 1;
      line-height: 28rpx;
      color: #fff;
      margin: 2rpx 0 0 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search {
    &::before {
      margin-right: 10rpx;
    }
  }
  .icon-scan {
    font-size: 30rpx;
    padding: 15rpx;
  }
}
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}

.details-page,
	.details-page-padding {
		flex: 1 1 auto;

		.details-page-item {
      color: #8F959E;
			padding: 24rpx;
		}

		.details-page-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #1F2329;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			line-height: 60rpx;
			position: relative;

			.details-page-line {
				width: 6rpx;
				height: 28rpx;
				background: #377AFF;
				border-radius: 3rpx 3rpx 3rpx 3rpx;
				margin-right: 10rpx;
			}
		}

		.details-item {
			margin-bottom: 10px;
		}

		.details-content-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #1F2329;
			padding-left: 48rpx;
			position: relative;
			line-height: 60rpx;
			margin-top: 10rpx;

			&::after {
				width: 38rpx;
				height: 38rpx;
        background-size: 100%;
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -19rpx;
			}
		}

		.download {
			position: absolute;
			right: 0;
			font-size: 26rpx;
			color: #8F959E;
		}

		.details-content-box {
			width: 100%;
			padding: 24rpx;
			background: #fff;
			border-radius: 16rpx;
      margin-bottom: 24rpx;

			.details-download-item {
				display: flex;
				padding: 30rpx 0;
				justify-content: flex-start;
				align-items: flex-start;
				border-bottom: 1px solid #D8D8D8;
				font-size: 28rpx;
				font-weight: bold;
				color: #1F2329;
				flex-direction: row;
				position: relative;

				.download-icon {
					position: absolute;
					right: 36rpx;
					top: 25rpx;
				}

				.details-download-p {
					font-size: 24rpx;
					color: #646A73;
					font-weight: normal;

					.time {
						margin-left: 40rpx;
					}
				}
			}
		}

		.details-content-page {
			font-size: 24rpx;
      color: #8F959E;
			line-height: 40rpx;
      border-bottom: 1px solid #EEEEEE;
      padding: 20rpx 0;
		}
    .details-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      color: #8F959E;
      margin-top: 20rpx;
      &-left, &-right {
        display: flex;
        align-items: center;
      }
    }
	}
</style>
